<template>
  <div>
    <div>
      <search-form
        :search-config="searchConfig"
        :label-width="150"
        @clear="clearSearch"
        @search="handleSearch"
      >

        <!-- <div class="qup-search-item">
          <el-form-item label="门店:" size="mini" prop="shopCode">
            <el-select
              v-model="formData.shopCode"
              placeholder="请选择"
            >
              <el-option
                v-for="item in shopList"
                :key="item.shopName"
                :label="item.shopName"
                :value="item.shopCode"
              />
            </el-select>
          </el-form-item>
        </div> -->
        <div class="qup-search-item">
          <el-form-item label="销售月份:" size="mini" prop="month">
            <el-date-picker
              v-model="formData.month"
              style="width:100%"
              value-format="yyyy-MM"
              type="month"
              placeholder="选择月份"
            />
          </el-form-item>
        </div>

      </search-form>
      <table-box
        ref="refTable"
        table-size="mini"
        :table-config="tableConfig"
        show-selection
        dragable
        :selected-arry.sync="tableSelected"
        :other-filters="otherFilters"
        @btnOperate="btnOperate"
        @selection-change="selectionChangeHandle"
      />
    </div>
    <div>
      <export-files v-if="exportVisible" title="导出" :config="exportConfig" :visible.sync="exportVisible" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'SaleDataCount',
  components: { },
  data() {
    return {
      shopData: { shopCode: '', shopName: '' },
      shopList: [],
      exportVisible: false,
      tableSelected: [],
      otherFilters: [],
      activeDataId: '',
      formData: { month: '', shopCode: '' },
      showEdit: false,
      showDetail: false,
      searchConfig: [
        { label: '门店', prop: 'shopCode', type: 'dialog',
          config: {
            defaultProps: { label: 'name', value: 'code' }
          },
          dialogConfig: {
            title: '门店',
            interfacePath: '/select-service/api/v1/shop/page',
            setting: [{ prop: 'code', title: '编码', width: 120 }, { prop: 'name', title: '名称', width: 250 }]
          }
        }
      ],
      // 办事处、成品客户经理、客户编码、客户名称、门店编码、门店名称、销售月份、沙发销量、床销量
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/displaySoftSaleNum/saleReportPage`,
        buttonGroupCode: 'default',
        hideSearchBar: true,
        tabIndex: 0,
        pageSize: 10,
        order: 'desc',
        sort: '',
        // 表格字段动态配置
        setting: [
          {
            prop: 'officeName',
            label: '办事处',
            minWidth: '120'
          },
          {
            prop: 'clientName',
            label: '成品客户经理',
            minWidth: '140'
          },
          {
            prop: 'customerCode',
            label: '客户编码',
            minWidth: '100'
          },
          {
            prop: 'customerName',
            label: '客户名称',
            minWidth: '140'
          },
          {
            prop: 'shopCode',
            label: '门店编码',
            minWidth: '120'
          },
          {
            prop: 'shopName',
            label: '门店名称',
            minWidth: '120'
          },
          {
            prop: 'month',
            label: '销售月份',
            minWidth: '120'
          },
          {
            prop: 'sofaTotal',
            label: '沙发销量',
            minWidth: '110'
          },
          {
            prop: 'bedTotal',
            label: '软床销量',
            minWidth: '145'
          }
        ],
        btnList: this.isProduction ? null : [
          {
            buttonName: '导出',
            outerFlag: true,
            optCode: 'export'
          }
        ]
      }
    }
  },
  computed: {
    exportConfig() {
      return [{
        code: 'export',
        name: '销量数据统计',
        dataApi: '/slm-admin/api/v1/displaySoftSaleNum/saleReportPageExport',
        selectedRows: [],
        paramsRaw: {},
        filtersRaw: this.otherFilters,
        queryField: 'id'
      }]
    }
  },
  created() {
  },
  methods: {
    // 清空搜索数据
    clearSearch() {
      this.formData = { month: '' }
    },
    // 设置表格多选行高亮
    tableRowClassName({ row, rowIndex }) {
      const filterArr = this.tableSelected.filter(item => item.id === row.id)
      return filterArr.length > 0 ? 'selected-highlight' : ''
    },
    refreshTable(flag) {
      this.$refs.refTable.initTableData(!!flag)
    },
    // 获取搜索条件
    handleSearch(data) {
      this.otherFilters = [...data.filtersRaw]
      if (this.formData.month) {
        this.otherFilters.push({ 'id': 'month', 'property': 'month', 'operator': '=', 'value': this.formData.month })
      }
      this.$nextTick(() => {
        this.$refs.refTable.initTableData()
      })
    },
    btnOperate(flag) {
      switch (flag) {
        case 'export':
          this.handleExport()
          break

        default:
          break
      }
    },
    // 导出
    handleExport() {
      this.exportVisible = true
    },
    selectionChangeHandle(rows) {
      this.tableSelected = rows
    }
  }
}
</script>
